<template>
  <div id="app">
    <v-header></v-header>
    <div class="visible_box">
      <v-com-list></v-com-list>
      <v-layout @currentCom="currentCom" :selectedCom="selectedCom"></v-layout>
      <v-editor @updateCom="updateCom" :selectedCom="selectedCom"></v-editor>
    </div>
  </div>
</template>

<script>
import VEditor from '@/views/editor-page/index.vue'
import VHeader from '@/views/header-page/index.vue'
import VComList from '@/views/ui-componentes-page/index.vue'
import VLayout from '@/views/visible-layout/index.vue'

export default {
  name: 'App',
  components: {
    VLayout,
    VComList,
    VHeader,
    VEditor
  },
  data() {
    return {
      selectedCom: null
    }
  },
  methods: {
    // 选中
    currentCom(com) {
      this.selectedCom = com
    },
    // 更新
    updateCom(com) {
      this.selectedCom = com
    },
  },
  created() {
    console.log('选中的组件', this.selectedCom);
  }
}
</script>

<style>
.visible_box {
  display: flex;
  height: calc(100vh - 80px);
}
</style>
